//webpack配置文件

//1.引入相关模块
//引入管理路径的模块
let path = require('path');
let glob = require('glob');//node内置模块,主要用于获取相关文件 

//引入插件
let HtmlWebpackPlugin = require('html-webpack-plugin');//引入html插件
let MiniCssExtractPlugin = require('mini-css-extract-plugin');//引入提取css插件
let OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');//引入压缩css插件

//自动打包入口js文件

// console.log('=============>', glob);
// console.log('=======>', glob.sync('./src/pages/*/*.js'));
//实现功能
//1.定义变量保存入口值
let entry = {};
//2.获取所有页面js模块
let entryJs = glob.sync('./src/pages/*/*.js');

//3.遍历 entryJs,拼接结构
entryJs.forEach(function (dir) {
    // console.log(dir);//所有页面js路径
    //console.log(path.basename(dir, '.js'));//把当前路径中.js删除掉
    let chunksName = path.basename(dir, '.js');
    //接口格式:  key:value
    entry[chunksName] = dir;
})


//自动打包所有页面
//1.定义变量保证页面的配置
let htmlArr = [];
//2.获取所有页面
let webHtml = glob.sync('./src/pages/*/*.html');
//3.遍历
htmlArr = webHtml.map(dir => {
    return new HtmlWebpackPlugin({
        template: dir,//设置需要打包的模块位置 
        filename: path.basename(dir),
        chunks: [path.basename(dir, '.html')]//配置当前页面使用哪些模块
    });
})

// console.log('===>', htmlArr);


//2.导出(暴露)5大核心
module.exports = {
    //1.entry 入口
    //单入口
    // entry: './src/js/index.js',
    //多入口
    // entry: {
    //     //配置单个页面内容
    //     //登录页
    //     advertisement: './src/pages/advertisement/advertisement.js',
    //     home: './src/pages/home/home.js',
    //     login: './src/pages/login/login.js',
    // },

    entry: entry,
    //2.output 出口
    output: {
        path: path.resolve(__dirname, 'dist'),// 会在项目根目录下自动生成dist目录 
        filename: 'js/[name].js',// 打包好生成的文件名
        publicPath: './',// 查找静态资源的路径
    },
    //3.loader 加载器
    //加载器配置项
    module: {
        //规则
        /*
            语法:
            //规则
              rules:[
                    可以写多个对象,每一个对象都是一条规则
                    {
                        test://,//找文件的后缀
                        use:[]//需要使用的加载器  顺序是从后往前
                    }
                ]  
        
        */
        rules: [
            //css加载器
            {
                test: /\.css$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,// 提取css
                    options: {
                        publicPath: '../'// 资源查找路径
                    }
                }, 'css-loader']
            },
            //less加载器
            {
                test: /\.less$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,// 提取css
                    options: {
                        publicPath: '../'// 资源查找路径
                    }
                }, 'css-loader', 'less-loader']
            },
            //处理css中的img
            {
                test: /\.(jpg|png|gif|jpeg|webp)$/,
                loader: 'url-loader',
                options: {
                    name: '[hash:16].[ext]',
                    limit: 10 * 1024,
                    esModule: false,
                    outputPath: 'img' // 图片输出文件夹 
                }
            },
            //处理html中的img
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            //字体图标
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,// 处理字体格式文件
                loader: 'file-loader',
                options: {
                    name: '[hash:16].[ext]', // 输出名字
                    outputPath: 'fonts' // 输出路径（输出到文件夹fonts中）
                }
            },
            //ES6转ES5
            {
                test: /\.js$/,
                loader: 'babel-loader',// loader 编译es6为es5
                exclude: /node_modules/ // 排除
            }
        ]
    },
    //4.plugins  插件
    plugins: [
        /*
            语法: 
                new 插件名({配置项参数})
        */


        // 提取css，把css中打包的js中提取出来成为独立文件
        new MiniCssExtractPlugin({// 提取css
            filename: 'css/[name].css'// 输出到css文件夹里
        }),

        new OptimizeCssAssetsWebpackPlugin(),// 压缩css

    ].concat(htmlArr),
    //5.mode  模式
    mode: process.env.NODE_ENV,
    //服务器模块
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),// 启动服务器目录
        compress: true,// 启动gzip
        port: 9910,// 端口
        open: true,// 自动打开服务
        publicPath: '/',// 静态资源查找路径
        // openPage: 'sport-data.html',// 打开的页面
        openPage: 'advertisement.html',// 打开的页面
    },
    target: 'web',// 目标是浏览器
}
